<template>
  <div>
    <van-tabs
      v-model="activeName"
      @click="onClick"
      class="fixed-tabs"
    >
      <van-tab
        :title="item.title"
        v-for="(item,index) in list"
        :key="index"
        :name="item.name"
      >
        <van-pull-refresh
          v-model="item.refreshing"
          @refresh="onRefresh(index)"
        >
          <van-list
            v-model="item.loading"
            :finished="item.finished"
            finished-text="没有更多了"
            :error.sync="item.error"
            error-text="请求失败，点击重新加载"
            @load="onLoad(index)"
          >
            <order-card
              v-for="(order,okey) in item.items"
              :key="okey"
              :item="order"
              @click="onView"
              @pay="showPaymentControl"
            />
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <!-- 支付弹窗 -->
    <payment-dialog
      v-model="showPayment"
      :order-id="payOrderId"
    />
  </div>
</template>

<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Popup,
  Button,
  Panel,
  PullRefresh,
  Lazyload,
  Card,
  Dialog,
  Tab,
  Tabs,
  List
} from 'vant'
import OrderCard from '@/components/order/card'
import PaymentDialog from '@/components/paymentDialog'
export default {
  components: {
    OrderCard,
    PaymentDialog,
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [PullRefresh.name]: PullRefresh,
    [Lazyload.name]: Lazyload,
    [Card.name]: Card,
    [Dialog.name]: Dialog,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List
  },

  data () {
    return {
      showPayment: false,
      payOrderId: 0,
      activeName: 'all',
      list: [
        {
          items: [],
          name: 'all',
          title: '全部订单',
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          items: [],
          name: 'payment',
          title: '待支付',
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          items: [],
          name: 'deliver',
          title: '待发货',
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        },
        {
          items: [],
          name: 'receive',
          title: '待收货',
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          meta: {
            totalCount: 0,
            pageCount: 0,
            currentPage: 0,
            perPage: 0
          }
        }
      ]
    }
  },
  created () {
    console.group('Order created')
    this.activeName = this.$route.params.type
    console.log(this.activeName)
    console.groupEnd('Order created')
  },

  methods: {
    onLoad (index) {
      console.log(this.activeName)
      const list = this.list[index]
      list.loading = true
      //

      let page = list.meta.currentPage + 1
      let type = list.name
      let items = list.items
      this.$http.shop
        .orderList({ page: page, type: type })
        .then(response => {
          if (list.refreshing) {
            list.items = []
            list.refreshing = false
          }
          const { data } = response
          console.log('res order data', data)
          let itemCount = data.items.length
          if (itemCount > 0) {
            list.items = items.concat(data.items)
          }
          list.meta = data.meta
          list.loading = false
          list.refreshing = false
          if (list.meta.pageCount <= list.meta.currentPage || itemCount <= 0) {
            list.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
          list.error = true
        })
    },
    onView (item) {
      this.$router.push({
        path: '/order/view/' + item.id
      })
    },
    onLoad2 (index) {
      console.log(this.activeName)
      const list = this.list[index]
      list.loading = true

      setTimeout(() => {
        if (list.refreshing) {
          list.items = []
          list.refreshing = false
        }

        for (let i = 0; i < 10; i++) {
          const text = list.items.length + 1
          list.items.push(text < 10 ? '0' + text : text)
        }

        list.loading = false
        list.refreshing = false

        if (index === 1 && list.items.length === 10 && !list.error) {
          list.error = true
        } else {
          list.error = false
        }

        if (list.items.length >= 40) {
          list.finished = true
        }
      }, 1000)
    },

    onRefresh (index) {
      this.list[index].finished = false
      this.onLoad(index)
    },

    onClick (name, title) {
      this.$route.params.type = name
    },

    showPaymentControl (item) {
      console.log(item)
      this.payOrderId = item.id
      this.showPayment = true
    }
  }
}
</script>

<style lang="less" scoped>
.fixed-tabs {
  height: 100%;
  padding-top: 44px;
  /deep/ .van-tabs__wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
  }
}

.demo-list {
  .van-cell {
    text-align: center;
  }

  .page-desc {
    margin: 0;
    padding: 5px 0;
    color: #666;
    font-size: 14px;
    text-align: center;

    &--text {
      margin: 0;
    }

    &--option {
      margin: 12px;
    }
  }

  .van-checkbox__label {
    color: #666;
  }
}
</style>
